<%--
  Created by IntelliJ IDEA.
  User: lqs
  Date: 2023/10/8
  Time: 9:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
<div id="app">
<%--   主表头部按钮 --%>
<el-button type="success" @click="newGoods">刷新</el-button>

<%-- 主体表格--%>
<el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'15px'}"
        :cell-style="tableCellStyle"
        @selection-change="handleSelectionChange">
    <el-table-column
            type="selection"
            width="55">
    </el-table-column>
    <el-table-column
            prop="cid"
            label="出库编号"
            width="150">
    </el-table-column>
    <el-table-column
            prop="outname"
            label="出库人"
            width="150">
    </el-table-column>
    <el-table-column
            prop="outtime"
            label="出库时间"
            width="200">
    </el-table-column>
    <el-table-column
            prop="outmethod"
            label="出库方式"
            width="150">
        <template slot-scope="scope">
            <el-tag
                    type="warning"
                    v-if="scope.row.outmethod==3"
                    effect="dark">
                平调出库
            </el-tag>
        </template>
    </el-table-column>
    <el-table-column
            prop="examstate"
            label="审核状态"
            width="150">
        <template slot-scope="scope">
            <el-tag
                    type="warning"
                    v-if="scope.row.examstate==1"
                    effect="dark">
                审核中
            </el-tag>
            <el-tag
                    type="success"
                    v-if="scope.row.examstate==2"
                    effect="dark">
                审核通过
            </el-tag>
            <el-tag
                    type="danger"
                    v-if="scope.row.examstate==3"
                    effect="dark">
                审核驳回
            </el-tag>
        </template>
    </el-table-column>
    <el-table-column
            prop="ysname"
            label="原始分店"
            width="180">
    </el-table-column>
    <el-table-column
            prop="pdname"
            label="平调分店"
            width="180">
    </el-table-column>
    <el-table-column
            label="详细"
            width="150">
        <template slot-scope="scope">
            <el-button
                    @click.native.prevent="upRow(scope.$index, tableData)"
                    type="text"
                    size="small">
                <el-tag
                        key="详细操作"
                        type='success'
                        effect="dark">
                    详细操作
                </el-tag>
            </el-button>
        </template>
    </el-table-column>

    <el-table-column
            label="操作"
            width="200">
        <template slot-scope="scope" >
            <el-button
                    @click.native.prevent="successRow(scope.$index, tableData)"
                    type="text"
                    size="small"
                    v-if="scope.row.examstate===1"
            >
                <el-tag
                        key="通过"
                        type=''
                        effect="dark"
                >
                    通过
                </el-tag>
            </el-button>

            <el-button
                    @click.native.prevent="falseRow(scope.$index, tableData)"
                    type="text"
                    size="small"
                    v-if="scope.row.examstate===1"
            >
                <el-tag
                        key="驳回"
                        type='danger'
                        effect="dark">
                    驳回
                </el-tag>
            </el-button>
        </template>
    </el-table-column>
</el-table>

<!--分页组件：
          @size-change:触发 改变每页显示的记录条数
          @current-change: 改变页码时触发的函数
          current-page: 显示的当前页面
          page-sizes: 页面大小的下拉框
          page-size: 默认每页显示的条数
          total: 总条数
     -->
<el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
</el-pagination>

<%--    详细信息弹出层--%>
<el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose">
    <el-table
            :data="tableData1"
            border
            style="width: 100%">
        <el-table-column
                prop="cid"
                label="入库详情ID"
                width="180">
        </el-table-column>
        <el-table-column
                prop="goodsname"
                label="商品名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="num"
                label="出库数量">
        </el-table-column>
        <el-table-column
                prop="sprice"
                label="售价">
        </el-table-column>
        <el-table-column
                prop="total"
                label="总价">
        </el-table-column>
    </el-table>
</el-dialog>



</div>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            //入库信息主表的内容
            tableData:[],
            //勾选的数据
            multipleSelection:[],
            //入库信息表头输入框
            branchSearchForm:{},
            //店铺数据
            branchSearch:[],
            //当前页面
            currentPage:1,
            //页面大小
            pageSize:5,
            //总条数
            total:0,

            //详细消息弹出层
            //隐藏
            dialogVisible:false,
            //数据
            tableData1:[],
        },
        created(){
            //  初始化商品表格
            this.init();
        },
        methods:{
            //主页面
            init(){
                this.dialogVisible2=true;
                axios.post("/Oc/trmain?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(function (resp){
                    app.tableData=resp.data.data.list;
                    app.total=resp.data.data.total
                })
            },
            //改变页面数据数量
            handleSizeChange(val){
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.init();
            },
            //改变当前 页面的函数
            handleCurrentChange(val){
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.init();
            },
            //表头查询按钮
            branchup(){
                this.init();
            },

            //刷新按钮
            newGoods(){
                this.init();
            },
            //选择的数据
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //详细操作
            upRow(index, tableData){
                this.dialogVisible=true;
                axios.post("/Oc/find2?cid="+this.tableData[index].cid).then(function (resp){
                    console.log(resp)
                    app.tableData1=resp.data.data
                })

            },
            // 改变某一列单元格背景颜色
            tableCellStyle({ row, column, rowIndex, columnIndex }) {
                let rowBackground = {};

                if (row.taskColor) {
                    if (columnIndex === 2) {
                        rowBackground.background = row.taskColor;
                    } else {
                        rowBackground.background = "#f8f8f8";
                    }
                } else {
                    rowBackground.background = "#ffffff";
                }
                return rowBackground;
            },
            //确认关闭
            handleClose(done) {
                done();
            },

            //通过
            successRow(index, tableData){
                //根据出库编号查出出库的商品
                axios.post("/Oc/success2?cid="+this.tableData[index].cid +"&branchid="+this.tableData[index].branchid).then(function (resp){
                    app.$message(resp.data.msg);
                    app.init()
                })
            },
            //驳回
            falseRow(index, tableData) {
                this.$prompt('理由', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    axios.post("/Oc/falseOh2?cid="+this.tableData[index].cid+"&remarks="+value).then(function (resp){
                        app.$message(resp.data.msg);
                        app.init()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                    this.newGoods()
                });

            },
        }
    })
</script>

</body>
</html>
